<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>试压数据采集</title>
    <link rel="stylesheet" href="library/layui/css/layui.css">
    <style>
        html,
        body {
            height: 100%;
        }

        .container {
            background-color: #eee;
        }

        .box {
            background-color: #eee;
        }

        ul {
            list-style: none;
            border-bottom-style: solid;
            border-top-style: solid;
            border-width: 1px;
            border-color: #e2e2e2;
        }

        ul.imglist {
            margin: 0 auto;
            width: 100%;
            overflow: hidden;
        }

        ul.imglist li {
            float: left;
            width: 70px;
            height: 55px;
            background-color: #1e9fff;
            margin: 5px;
            padding: 2px;
            border-radius: 5px;
            cursor: pointer;
        }

        ul.imglist li a {
            color: black;
        }

        ul.imglist li img {
            display: block;
            width: 30px;
            height: 30px;
            margin: auto;
            padding-top: 2px;
        }

        ul.imglist li span {
            display: block;
            width: 100%;
            height: 20px;
            line-height: 20px;
            text-align: center;
            margin-top: 6px;
            color: white;
            font-size: 13px;
        }

        .info-panel {
            margin: 5px;
            border: solid;
            border-width: 1px;
            border-color: #e2e2e2;
        }

        .layui-input[disabled] {
            color: #fff;
            background-color: green;
            width: 90%;
        }
    </style>
</head>

<body class="container">
    <div class="layui-row">
        <div class="layui-col-md12 layui-col-lg12 layui-col-xl12">
            <div class="box">
                <div class="layui-row">
                    <div class="layui-col-xs12 layui-col-md12">
                        <ul class="imglist">
                            <li id="Collect">
                                <span>
                                    <i class="layui-icon layui-icon-chart" style="font-size: 25px; color: #fff;"></i>
                                </span>
                                <span id="collect">开始采集</span>
                            </li>
                            <li id="ProjectManageForm">
                                <span>
                                    <i class="layui-icon layui-icon-template-1"
                                       style="font-size: 25px; color: #fff;"></i>
                                </span>
                                <span>工程管理</span>
                            </li>
                            <li id="DeviceManageForm">
                                <span>
                                    <i class="layui-icon layui-icon-app" style="font-size: 25px; color: #fff;"></i>
                                </span>
                                <span>设备管理</span>
                            </li>
                            <li id="TemplateManageForm">
                                <span>
                                    <i class="layui-icon layui-icon-templeate-1"
                                       style="font-size: 25px; color: #fff;"></i>
                                </span>
                                <span>模板管理</span>
                            </li>
                            <li id="FormPointManageForm">
                                <span>
                                    <i class="layui-icon layui-icon-layer" style="font-size: 25px; color: #fff;"></i>
                                </span>
                                <span>界面点位</span>
                            </li>
                            <li id="SystemSetForm">
                                <span>
                                    <i class="layui-icon layui-icon-set" style="font-size: 25px; color: #fff;"></i>
                                </span>
                                <span>系统设置</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md2 layui-col-lg2 layui-col-xl2">
                        <div class="layui-form layui-form-pane info-panel">
                            <div class="layui-card">
                                <div class="layui-card-header">主信息</div>
                                <div class="layui-card-body">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">压力(Mpa)</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="mainPressure" id="mainPressure" autocomplete="off"
                                                class="layui-input" value="0" placeholder="主压力" disabled>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">温度(℃)</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="mainTemplature" id="mainTemplature"
                                                autocomplete="off" class="layui-input" value="0" placeholder="主温度"
                                                disabled>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-card">
                                <div class="layui-card-header">远端信息</div>
                                <div class="layui-card-body">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">压力(Mpa)</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="remotePressure" id="remotePressure"
                                                autocomplete="off" class="layui-input" value="0" placeholder="远端压力"
                                                disabled>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">温度(℃)</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="remoteTemplature" id="remoteTemplature"
                                                autocomplete="off" class="layui-input" value="0" placeholder="远端温度"
                                                disabled>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-card">
                                <div class="layui-card-header">工程信息</div>
                                <div class="layui-card-body">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">编号</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="projectNumber" id="projectNumber"
                                                autocomplete="off" class="layui-input" value="0" placeholder="编号"
                                                disabled>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">名称</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="projectName" id="projectName"
                                                autocomplete="off" class="layui-input" value="0" placeholder="名称"
                                                disabled>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-card">
                                <div class="layui-card-header">当前阶段</div>
                                <div class="layui-card-body">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">试压一段</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="firstStage" id="firstStage" autocomplete="off" 
                                                class="layui-input" value="未开始..." placeholder="未开始" disabled>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">试压二段</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="secondStage" id="secondStage" autocomplete="off"
                                                class="layui-input" value="未开始..." placeholder="未开始" disabled>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">试压三段</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="thirdStage" id="thirdStage" autocomplete="off"
                                                class="layui-input" value="未开始..." placeholder="未开始" disabled>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">强度阶段</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="intensityStage" id="intensityStage" autocomplete="off"
                                                class="layui-input" value="未开始..." placeholder="未开始" disabled>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">严密性段</label>
                                        <div class="layui-input-block">
                                           <input type="text" name="rigorStage" id="rigorStage" autocomplete="off"
                                                class="layui-input" value="未开始..." placeholder="未开始" disabled>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="layui-col-md10 layui-col-lg10 layui-col-xl0">
                        <div id="templature" style="width: 100%;height:300px;"></div>
                        <div id="pressure" style="width: 100%;height:300px;"></div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-row">
            <div class="layui-col-md2 layui-col-lg2 layui-col-xl2">

            </div>
            <div class="layui-col-md10 layui-col-lg10 layui-col-xl0">
            </div>
        </div>
        <script src="library/jquery/jquery-3.7.1.min.js"></script>
        <script src="library/layui/layui.js"></script>
        <script src="library/echart/echarts.min.js"></script>
        <script src="library/moment/moment.js"></script>
        <script>
            var startCollect = false;

            $("ul li").click(function () {
                if ($(this).attr("id") == "Collect") {
                    if (startCollect == true) {
                       var index =  layer.confirm('您确定要停止采集吗？', { icon: 3 }, function () {
                            window.formium.postMessage("StopCollect", "");
                            stopCollect();
                           layer.close(index);
                        });
                    }
                    else
                    {
                        window.formium.postMessage("ShowForm", $(this).attr("id"));
                    }
                }
                else
                {
                    window.formium.postMessage("ShowForm", $(this).attr("id"));
                }
            })

            // 开始采集
            function startcollect() {
                $("#collect").text("停止采集");
                startCollect = true;
                freshChart();
            }

            // 停止采集
            function stopCollect() {
                $("#collect").text("开始采集");
                startCollect = false;
                clearInterval(chartInterval);
            }

            ///更新项目信息
            function projectInfo(number, name)
            {
                $("#projectNumber").val(number);
                $("#projectName").val(name);
            }

            var chartInterval;

            ///刷新曲线
            function freshChart() {
                templatureChart.setOption({
                    xAxis: {
                        min: moment().format("YYYY-MM-DD HH:mm:ss"),
                    },
                });
                pressureChart.setOption({
                    xAxis: {
                        min: moment().format("YYYY-MM-DD HH:mm:ss"),
                    },
                });

                chartInterval = setInterval(function () {
                    var time = moment().format("YYYY-MM-DD HH:mm:ss");
                    var data = [time, $("#mainTemplature").val()]
                    mainTemplatureData.push(data);
                    var data2 = [time, $("#remoteTemplature").val()]
                    remoteTemplatureData.push(data2);

                    var data3 = [time, $("#mainPressure").val()]
                    mainPressureData.push(data3);

                    var data4 = [time, $("#remotePressure").val()]
                    remotePressureData.push(data4);

                    var dataZoom = [{
                        type: 'slider',
                        start: start,
                        end:100
                    }];

                    templatureChart.setOption({
                        series: [
                            {
                                name: '主温度',
                                data: mainTemplatureData
                            },
                            {
                                name: '远端温度',
                                data: remoteTemplatureData
                            }
                        ],
                        dataZoom: dataZoom,
                    });

                    pressureChart.setOption({
                        series: [
                            {
                                name: '主压力',
                                data: mainPressureData
                            },
                            {
                                name: '远端压力',
                                data: remotePressureData
                            }
                        ],
                        dataZoom: dataZoom,
                    });
                }, 1000);
            }

            function chartOption() {
                var option = {
                    tooltip: {
                        trigger: "axis",
                    },
                    toolbox: {
                        show: true,
                        right:"10%",
                        feature: {
                            myRealtime: { // 必须以my开头,不然不会显示
                                show: true,
                                title: '实时',
                                icon: 'path://M680.106667 774.165333c4.266667 0 7.936 1.536 11.029333 4.650667a15.061333 15.061333 0 0 1 4.650667 11.008 15.061333 15.061333 0 0 1-4.650667 11.029333l-33.557333 33.557334c11.605333 10.773333 24.746667 19.093333 39.445333 24.96a122.218667 122.218667 0 0 0 45.781333 8.832 123.221333 123.221333 0 0 0 61.226667-15.914667 123.477333 123.477333 0 0 0 45.546667-43.84c1.792-2.773333 6.122667-12.330667 12.992-28.650667 1.28-3.754667 3.754667-5.632 7.338666-5.632h47.018667c2.133333 0 3.968 0.768 5.504 2.325334a7.530667 7.530667 0 0 1 2.090667 7.210666c-10.453333 43.754667-32.32 79.232-65.621334 106.410667-33.322667 27.178667-72.32 40.789333-117.077333 40.789333a183.466667 183.466667 0 0 1-69.184-13.482666 186.922667 186.922667 0 0 1-59.626667-38.442667l-31.573333 31.573333a15.061333 15.061333 0 0 1-11.029333 4.672 15.061333 15.061333 0 0 1-11.029334-4.650666 15.061333 15.061333 0 0 1-4.650666-11.029334v-109.717333c0-4.245333 1.557333-7.893333 4.650666-11.008a15.061333 15.061333 0 0 1 11.029334-4.650667h109.696zM160 127.978667l0.128 493.76 205.845333-215.573334a32 32 0 0 1 43.584-2.496l2.474667 2.282667 100.501333 103.146667L830.698667 190.72a32 32 0 0 1 47.466666 42.794667l-2.197333 2.432-341.077333 341.333333a32 32 0 0 1-43.114667 1.962667l-2.432-2.24-100.010667-102.634667-229.184 240 0.042667 149.632h330.730667v64H138.88c-23.552 0-42.666667-19.114667-42.666667-42.666667l-0.085333-180.757333a32.192 32.192 0 0 1 0-5.824L96 128h64z m582.826667 426.752c23.829333 0 46.997333 4.522667 69.546666 13.589333a189.738667 189.738667 0 0 1 59.989334 38.336l31.829333-31.594667a15.061333 15.061333 0 0 1 11.029333-4.650666c4.245333 0 7.914667 1.536 11.008 4.650666a15.061333 15.061333 0 0 1 4.672 11.008v109.717334a15.061333 15.061333 0 0 1-4.672 11.029333 15.061333 15.061333 0 0 1-11.008 4.650667h-109.717333a15.061333 15.061333 0 0 1-11.029333-4.650667 15.061333 15.061333 0 0 1-4.650667-11.029333c0-4.245333 1.557333-7.914667 4.650667-11.008l33.813333-33.813334c-24.170667-22.357333-52.672-33.536-85.482667-33.536a123.221333 123.221333 0 0 0-61.226666 15.914667 123.477333 123.477333 0 0 0-45.546667 43.84c-1.792 2.773333-6.122667 12.309333-12.970667 28.650667-1.322667 3.754667-3.754667 5.632-7.36 5.632h-48.725333a7.530667 7.530667 0 0 1-5.504-2.346667 7.530667 7.530667 0 0 1-2.346667-5.504v-1.706667c10.624-43.733333 32.661333-79.232 66.133334-106.410666 33.472-27.178667 72.661333-40.768 117.546666-40.768z',
                                onclick: function () {
                                    start = 50;
                                }
                            },
                            myAll: { // 必须以my开头,不然不会显示
                                show: true,
                                title: '全部',
                                icon: 'path://M170.666667 106.666667l0.192 736H906.666667v64H149.546667c-23.552 0-42.666667-19.093333-42.666667-42.666667L106.666667 106.666667h64z m686.506666 454.144l13.653334 16.362666a21.333333 21.333333 0 0 1-2.666667 30.058667l-171.157333 143.146667a21.333333 21.333333 0 0 1-21.546667 3.477333l-229.973333-91.285333-113.834667 94.997333a21.333333 21.333333 0 0 1-30.037333-2.709333l-13.653334-16.362667a21.333333 21.333333 0 0 1 2.688-30.058667l133.312-111.274666a21.333333 21.333333 0 0 1 21.546667-3.456l229.930667 91.264 151.68-126.826667a21.333333 21.333333 0 0 1 30.037333 2.666667z m-1.621333-417.962667l16.896 13.013333a21.333333 21.333333 0 0 1 3.925333 29.888L685.802667 433.706667a21.333333 21.333333 0 0 1-20.202667 8.085333l-226.794667-35.413333-150.186666 222.357333a21.333333 21.333333 0 0 1-27.477334 7.018667l-2.133333-1.28-17.685333-11.946667a21.333333 21.333333 0 0 1-5.738667-29.610667l165.354667-244.821333a21.333333 21.333333 0 0 1 20.992-9.130667L650.453333 374.613333l175.146667-227.882666a21.333333 21.333333 0 0 1 29.930667-3.904z',
                                onclick: function () {
                                    start = 0;
                                }
                            },
                            saveAsImage: {
                                show: true,
                                type: 'png',
                                name: '下载',
                                title: '保存为图片',
                            },
                        },
                    },
                    dataZoom: [{
                        type: 'slider',
                        realtime: true,
                        top: "265px"
                    }],
                    xAxis: {
                        type: 'time',
                        name: '时间',
                        min: startDate,
                        //max: endDate,
                        axisLabel: {
                            formatter: '{MM}-{dd} {HH}:{mm}:{ss}',
                            show: true,
                            showMinLabel: true,
                            showMaxLabel: true,
                            width: 60,
                            overflow: 'break'
                        }
                    },
                    yAxis: {},
                };
                return option;
            }
            var nowString = moment().format("YYYY-MM-DD HH");
            var now = moment(nowString + ":00:00");

            var startDate = now.format("YYYY-MM-DD HH:mm:ss");

            var endDate = now.add(20, 'm').format("YYYY-MM-DD HH:mm:ss");
            var mainTemplatureData = [];
            var mainPressureData = [];
            var remoteTemplatureData = [];
            var remotePressureData = [];
            var start = 50;
            // 指定图表的配置项和数据
            var option = chartOption();
            option.title = { text: "温度曲线" }
            option.legend = {
                data: ['主温度', '远端温度']
            }
            option.series = [
                {
                    name: '主温度',
                    type: 'line',
                    smooth: true,
                    color: "#ff5722"
                },
                {
                    name: '远端温度',
                    type: 'line',
                    smooth: true,
                    color: "#ffb800"
                }
            ]
            var templatureChart = echarts.init(document.getElementById('templature'));
            templatureChart.setOption(option);
            var templatureChart = echarts.init(document.getElementById('templature'));
            templatureChart.setOption(option);

            var option2 = chartOption();
            option2.title = { text: "压力曲线" }
            option2.legend = {
                data: ['主压力', '远端压力']
            }
            option2.series = [
                {
                    name: '主压力',
                    type: 'line',
                    smooth: true
                },
                {
                    name: '远端压力',
                    type: 'line',
                    smooth: true
                }
            ]
            var pressureChart = echarts.init(document.getElementById('pressure'));
            pressureChart.setOption(option2);

            //设置温度、压力值
            function setup(item, data, alarm) {
                var color = "green"
                if (alarm == 1) {
                    color = "red"
                }
                $(item).css('background-color', color)
                $(item).val(data);
            }

            var loading;

            //loading
            function loading() {
                loading = layer.msg('正在加载设备...', { icon: 16, shade: 0.3, time: 0 });
            }

            //loading结束
            function endLoading() {
                layer.close(loading);
            }


            //更新阶段
            function updateStage(id,msg) {
                $(id).val(msg);
            }

        </script>
</body>

</html>